{% extends 'base.html' %}

{% block  title%}
评分情况分析
{% endblock %}

{% block sidebar%}
    <aside id="sidebar" class="sidebar">

    <ul class="sidebar-nav" id="sidebar-nav">
      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'home' %}">
          <i class="bi bi-grid"></i>
          <span>首页</span>
        </a>
      </li>
      <li class="nav-heading">个人信息</li>
      <li class="nav-item">
        <a class="nav-link collapsed"  href="{% url 'changeSelfInfo' %}">
          <i class="bi bi-menu-button-wide"></i><span>个人信息</span></i>
        </a>
      </li><!-- End Components Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed"  href="{% url 'changePassword' %}">
          <i class="bi bi-journal-text"></i><span>修改密码</span>
        </a>
      </li>
      <li class="nav-heading">数据表格</li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'tableData' %}">
          <i class="bi bi-layout-text-window-reverse"></i><span>数据操作</span>
        </a>
      </li>
      <li class="nav-heading">数据可视化</li>

      <li class="nav-item">
        <a class="nav-link collapsed"  href="{% url 'cityChar' %}">
          <i class="bi bi-bar-chart"></i><span>城市和景点等级分析</span></i>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link " href="{% url 'rateChar' %}">
          <i class="bi bi-gem"></i><span>评分情况分析</span>
        </a>
      </li><!-- End Icons Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'priceChar' %}">
          <i class="bi bi-person"></i>
          <span>价格销量分析</span>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'commentsChar' %}">
          <i class="bi bi-question-circle"></i>
          <span>评论分析</span>
        </a>
      </li>
      <li class="nav-heading">词云图</li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'detailIntroCloud' %}">
          <i class="bi bi-card-list"></i>
          <span>详情简介词云图</span>
        </a>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'commentContentCloud' %}">
          <i class="bi bi-box-arrow-in-right"></i>
          <span>评论内容词云图</span>
        </a>
      </li>

      <li class="nav-heading">后台管理</li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="http://127.0.0.1:8000/admin/">
          <i class="bi bi-envelope"></i>
          <span>后台数据管理</span>
        </a>
      </li>
    </ul>

  </aside>

{% endblock %}


{% block content %}
      <div class="pagetitle" style="display: flex;align-items: center">
      <div style="margin-right: auto">
          <h1>评分情况分析</h1>
        <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{% url 'home' %}">数据可视化</a></li>
          <li class="breadcrumb-item active">评分情况分析页面</li>
        </ol>
      </nav>
      </div>
        <h5 style="font-weight: normal">
            {{ nowTime.year }} - {{ nowTime.mon }} - {{ nowTime.day }}
        </h5>
    </div>


      <section class="section dashboard">
      <div class="row">
          <div class="col-lg-12">
              <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">城市选择</span></h5>
                            <form action="{% url 'rateChar' %}" method="POST">
                              <div class="row mb-3">
                                  <label class="col-sm-2 col-form-label">城市</label>
                                  <div class="col-sm-10">
                                    <select class="form-select" name="province" aria-label="Default select example">
                                      {% for i in cityList %}
                                            <option value="{{ i }}">{{ i }}</option>
                                        {% endfor %}
                                    </select>
                                    <button style="margin-top:10px" class="btn btn-primary">提交</button>
                                  </div>
                                </div>
                          </form>
                    </div>
                  </div>
          </div>
      </div>
              <div class="row">
                <div class="col-lg-6">

                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">景点星级占比</span></h5>
                        <div id="mains" style="width:100%;height: 450px"></div>


                    </div>
                  </div>

                </div>
                <div class="col-lg-6">

                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">景点评分占比</span></h5>
                        <div id="mainsTwo" style="width:100%;height: 450px"></div>


                    </div>
                  </div>

                </div>

              </div>
            </section>


{% endblock %}

{% block echarts%}
    <script>
            var chartDom = document.getElementById('mains');
            var myChart = echarts.init(chartDom);
            var option;
            let data = {{ charOneData | safe }}
            const treemapOption = {
                tooltip: {
    trigger: 'item'
  },
              series: [
                {
                  type: 'treemap',
                  id: 'echarts-package-size',
                  animationDurationUpdate: 1000,
                  roam: false,
                  nodeClick: undefined,
                  data: data,
                  universalTransition: true,
                  label: {
                    show: true
                  },
                  breadcrumb: {
                    show: false
                  }
                }
              ]
            };
            const sunburstOption = {
                tooltip: {
    trigger: 'item'
  },
              series: [
                {
                  type: 'sunburst',
                  id: 'echarts-package-size',
                  radius: ['20%', '90%'],
                  animationDurationUpdate: 1000,
                  nodeClick: undefined,
                  data: data,
                  universalTransition: true,
                  itemStyle: {
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,.5)'
                  },
                  label: {
                    show: false
                  }
                }
              ]
            };
            let currentOption = treemapOption;
            myChart.setOption(currentOption);
            setInterval(function () {
              currentOption =
                currentOption === treemapOption ? sunburstOption : treemapOption;
              myChart.setOption(currentOption);
            }, 3000);
            option && myChart.setOption(option);
    </script>
    <script>
        var chartDoms = document.getElementById('mainsTwo');
        var myCharts = echarts.init(chartDoms);
        var options;

        const piePatternSrc =
          '';
        const bgPatternSrc =
          '';
        const piePatternImg = new Image();
        piePatternImg.src = piePatternSrc;
        const bgPatternImg = new Image();
        bgPatternImg.src = bgPatternSrc;
        options = {
          backgroundColor: {
            image: bgPatternImg,
            repeat: 'repeat'
          },
          title: {
            text: '景点评分占比',
            textStyle: {
              color: '#235894'
            }
          },
          tooltip: {},
          series: [
            {
              name: '评分个数',
              type: 'pie',
              selectedMode: 'single',
              selectedOffset: 30,
              clockwise: true,
              label: {
                fontSize: 18,
                color: '#235894'
              },
              labelLine: {
                lineStyle: {
                  color: '#235894'
                }
              },
              data: {{ charTwoData |safe }},
              itemStyle: {
                opacity: 0.7,
                color: {
                  image: piePatternImg,
                  repeat: 'repeat'
                },
                borderWidth: 3,
                borderColor: '#235894'
              }
            }
          ]
        };

        options && myCharts.setOption(options);

    </script>
{% endblock %}